<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：我的页面
 *		作   者：Frank
 *		创建日期：2023/08/26
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/08/26			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="my">
		<ModalDialog v-if="isShowDlg" :data="dlgData"></ModalDialog>
		<InviteDialog v-if="isShowInviteDlg" :data="inviteDlgData"></InviteDialog>
		<!-- 顶部的三个按钮 -->
		<view class="my-top-box">
<!-- 			<view class="my-top">
				<text class="my-top-text iconfont icon-send-sms-full" @tap="onFeedback"></text>
				<text class="my-top-text iconfont icon-wodekefu"></text>
				<text class="my-top-text iconfont icon-shezhi" @tap="onSetting"></text>
			</view> -->
		</view>
		<!-- 头部 -->
		<view class="my-head">
			<view class="my-head-top">
				<view class="my-head-top-avatar">
					<view class="my-head-top-avatar-box">
						<image class="my-head-top-avatar-box-avatar" :src="avatar" mode=""></image>
						<!-- <image class="my-head-top-avatart-box-btn" src="../../static/img/my/bdzh_btn.png" mode=""></image> -->
					</view>
				</view>
				<view class="my-head-top-name">
					<view class="my-head-top-name-user">{{userStore.user.nick_name}}</view>
					<!-- <view class="my-head-top-name-tips">完成绑定可以预防帐号丢失和兑换失败哟~</view> -->
				</view>
			</view>
			<view class="my-head-mid">
				<view class="my-head-mid-item">
					<image class="my-head-mid-item-img" src="../../static/img/common/sj36.png" mode=""></image>
					<text class="my-head-mid-item-num" >{{userStore.user.crystal}}</text>
				</view>
			</view>
			<view class="my-head-bottom">
				<view class="my-head-bottom-item" @tap="onExchangeRecord">
					<image class="my-head-bottom-item-img" src="../../static/img/my/dhjl.png" mode=""></image>
					<text class="my-head-bottom-item-text"> 兑换记录</text>
				</view>
				<view class="my-head-bottom-item" @tap="onAddress">
					<image class="my-head-bottom-item-img" src="../../static/img/my/shdz.png" mode=""></image>
					<text class="my-head-bottom-item-text"> 收货地址</text>
				</view>
				<view class="my-head-bottom-item" @tap="onComment">
					<image class="my-head-bottom-item-img" src="../../static/img/my/rmsd.png" mode=""></image>
					<text class="my-head-bottom-item-text"> 热门晒单</text>
				</view>
				<view class="my-head-bottom-item" @tap="onPackage">
					<image class="my-head-bottom-item-img" src="../../static/img/my/wdbb.png" mode=""></image>
					<text class="my-head-bottom-item-text"> 我的背包</text>
				</view>
				<view class="my-head-bottom-item" @tap="onInvite">
					<image class="my-head-bottom-item-img" src="../../static/img/my/dhm.png" mode=""></image>
					<text class="my-head-bottom-item-text"> 邀请码</text>
				</view>
			</view>
		</view>
		<!-- 分界 -->
		<view class="head-mid-splice"></view>
		<view class="memu">
			<view class="menu-item" v-for="(item,index) in list" :key="index" @tap="onItem(index)">
				<view class="menu-item-text">{{item}}</view>
				<text v-if="index <= 3" class="menu-item-arrow iconfont icon-iconfontyoujiantou"></text>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-beian">
				<uni-link href="https://beian.miit.gov.cn" text="蜀ICP备2024058077号-2A" showUnderLine="false" color="#8e8e8e"></uni-link>
			</view>
			<text class="bottom-name">{{mixedStore.localVer.appName}} V{{mixedStore.localVer.version}}({{mixedStore.localVer.versionCode}})</text>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import utility from '@/common/utility.js'
	import ModalDialog from '../../components/common/ModalDialog'
	import InviteDialog from '../../components/common/InviteDialog'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { userStore } from '@/store/modules/userStore.js'	
	import { mixedStore } from '@/store/modules/mixedStore.js'	
	export default {
		components:{
			ModalDialog,
			InviteDialog
		},
		data() {
			return {
				avatar:'',			
				// 对话框
				isShowDlg:false,
				dlgData:{
					title:'',
					text:'',
					cbTap:()=>{this.isShowDlg = false;}
				},
				// 邀请对话框
				isShowInviteDlg:false,
				inviteDlgData:{
					cbClose:()=>{
						this.isShowInviteDlg = false;
					}
				},
				list:[
					"用户协议",
					"隐私政策",
					"福利获取声明",
					"联系我们"
				]
			}
		},	
			
		computed:{
			...mapStores(userStore, mixedStore)
		},
		
		methods: {
			onAddress(){
				uni.navigateTo({
					url:'/pages/my-path/my-path'
				});
			},
			onComment(){
				uni.navigateTo({
					url:'/pages/comment/comment'
				});
			},
			onPackage(){
				uni.navigateTo({
					url:'/pages/package/package'
				})
			},
			onShare(){
				let downUrl = utility.baseWeb + 'web/down.html';
				let imageUrl = utility.baseWeb + 'web/wx_share.png';
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					title:"最近超火的福利兑换APP",
					summary: "最新款iPhone,智能手表, 电视,洗衣机等众多奖品等你兑换，快来免费下载体验吧！",
					imageUrl,
					href:downUrl,
					success: res => {
						$http.request({
							url:'task/share',
							token:true
						}).then( res => {
							let task_share_flag = res.data.task_share_flag;
							this.userStore.user.task_share_flag = task_share_flag;
							this.dlgData.title = '分享';
							this.dlgData.text = `分享成功，快去领取奖励吧!`
							this.dlgData.btnText = '好的'
							this.dlgData.cbTap = () => {
								this.isShowDlg = false;
							}
							this.isShowDlg = true;	
						}).catch( (e) => {
							console.log('share faild');
							uni.showToast({
								title:e,
								icon:'none'
							})
						});							
					},
					fail: err=> {
						console.log('share error', err)
					}
				});
				
			},
			onInvite(){
				this.isShowInviteDlg = true;
			},
			onFeedback(){
				uni.navigateTo({
					url:'/pages/feedback/feedback'
				})
			},
			onSetting(){
				uni.navigateTo({
					url:'/pages/setting/setting'
				})
			},
			onExchangeRecord(){
				uni.navigateTo({
					url:'/pages/exchange-list/exchange-list'
				})
			},
			onItem(index){
				if(index == 3){
					this.onFeedback();
					return;
				}
				uni.navigateTo({
					url:'/pages/setting-desc/setting-desc?index='+index
				})
			},
		},
		onLoad() {
			this.avatar = `../../static/avatar/${this.userStore.user.avatar}.jpg`; 
			uni.$on('SHOW_INVITE', this.onInvite);
		},
		onUnload() {
			uni.$off('SHOW_INVITE', this.onInvite);
		}
	}
</script>

<style scoped>
	.my {
		padding: 52rpx 16rpx 0;
		color: black;
		background-color: #F2EEFD; 
		width: 100vw;
		height: 100vh;
		position: relative;
	}
	.my-top-box{
		width: 100%;
		height: 83rpx;
		position: relative;
		left: 0;
		top: 0;
		background-color: #F2EEFD;
	}
	.my-top{
		width: 175rpx;
		height: 100%;
		position: absolute;
		top:0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.my-head{
		width: 100%;
		height: 424rpx;
		background-color: #F2EEFD;
	}
	.my-head-top{
		height: 150rpx;
		display: flex;
	}
	.my-head-top-avatar{
		height: 100%;
		padding: 0 15rpx;
	}
	.my-head-top-avatar-box{
		width: 126rpx;
		height: 126rpx;
	}
	.my-head-top-avatar-box-avatar{
		width: 120rpx;
		height: 120rpx;
		border: 6rpx solid #F7F3E3;
		border-radius: 50%;
	}
	.my-head-top-avatart-box-btn{
		width: 98rpx;
		height: 35rpx;
		color: white;
		font-size: 24rpx;
		display: block;
		position: relative;
		left:12rpx;
		top:-35rpx;
	}
	.my-head-top-name{
		flex:1;
		height: 100%;
		padding: 0 10rpx;
		position: relative;
		left: 0;
		top: 0;
	}
	.my-head-top-name-user{
		font-size: 36rpx;
		position: relative;
		left:0;
		top:40rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
	}
	.my-head-top-name-tips{
		font-size: 24rpx;	
		position: absolute;
		left:10rpx;
		top:90rpx;
		white-space: nowrap;
		
	}
	.my-head-top-sign{
		width: 187rpx;
		height: 100%;
	}
	.my-head-top-sign-img{
		width: 100%;
		height: 67rpx;
		padding-right: 15rpx;
	}
	.my-head-mid{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 38rpx;
		color: #867AF9;
		font-weight: bold;
	}
	.my-head-mid-item{
		height: 57rpx;
		margin: 0 20rpx 0rpx 20rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 40rpx;
	}
	.my-head-mid-item-img{
		width: 38rpx;
		height: 38rpx;
	}
	.my-head-mid-item-num{
		padding-left: 6rpx;
	}
	.my-head-bottom{
		width: 100%;
		height: 195rpx;
		/* background-color: #F8F4FB; */
		background-color: #F2EEFD;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;
	}
	.my-head-bottom-item{
/* 		width: 117rpx;
		height: 163rpx; */
		text-align: center;
	}
	.my-head-bottom-item-img{
		width: 117rpx;
		height: 117rpx;
	}
	.head-mid-splice{
		width: 100vw;
		height: 12rpx;
		background-color: #F7F7F7;
		position: relative;
		left: -16rpx;
		top:0;
	}

	.exit-btn{
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ABA6FB;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.memu{
		padding-top: 50rpx;
	}
	.menu-item{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		background-color: white;
		margin: 12rpx 0;
		font-size: 36rpx;
		align-items: center;
	}
	.menu-item-arrow{
		font-size: 38rpx;
	}
	.bottom{
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.bottom-name{
		display: block;
		color: #8e8e8e;
	}
</style>
